<template>
	<view>
		<yingbing-video
		v-for="(item, index) in playList" :key="index" class="video"
		prev-btn-show
		:nextBtnShow="nextBtnShow"
		@prevBtnClick="onPrevBtnClick"
		@nextBtnClick="onNextBtnClick"
		formats="auto"
		loop
		muted
		:initialTime="initialTime"
		@loadedmetadata="onloadedmetadata"
		@error="onerror"
		@captureFinish="captureFinish"
		:barrages="damuku"
		:progressShow="progressShow"
		autoplay
		ref="video"
		barrageShow
		title="测试视频测试视频测试视频测试视频测试视频测试视频测试视频测试视频测试视频测试视频测试视频测试视频"
		src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4"
		@canplay="onCanplay">
		<!-- <view class="nav">测试</view> -->
		</yingbing-video>
		<button @tap="capture">截图</button>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				playList: [{
					id: 10000,
					title: '你好啊',
					poster: '/static/logo.png',
					src: 'https://video.ondemandcn.com/98126187b7df4119996c1af834b934d6/d1f5cadf268f401c867746268d350081-10883b4fb481a0ae978efbf06ee4dbf6-ld.m3u8'
				}],
				src: '',
				damuku: [],
				nextBtnShow: true,
				initialTime: 100,
				progressShow: false
			}
		},
		created() {
			for ( let i = 0; i < 1000; i++ ) {
				for ( let j = 0; j < 10; j++ ) {
				  this.damuku.push({
				  		time: i,
				  		text: '这是第' + (i) + '秒的第' + (j + 1) + '条弹幕',
				  		color: '#fff',
						fontSize: Math.ceil(Math.random() * 9) + 20
				  })
				}
			}
		},
		onReady() {
			// this.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4'
			setTimeout(() => {
				this.progressShow = true
			}, 3000)
		},
		methods: {
			onCanplay (e) {
				console.log(e);
			},
			onloadedmetadata (e) {
				console.log(e);
			},
			onerror (e) {
				console.log(e);
			},
			capture () {
				this.$refs.video.capture()
			},
			captureFinish (e) {
				console.log(e);
			},
			onPrevBtnClick (e) {
				console.log('onPrevBtnClick');
				this.src = 'https://ydtnt-jw.oss-cn-zhangjiakou.aliyuncs.com/jw-video/%E8%A7%86%E9%A2%91/%E8%8B%B1%E8%AF%AD/%E5%94%90%E8%BF%9F%E8%AF%8D%E6%B1%87%E7%9A%84%E9%80%BB%E8%BE%91%E5%8D%95%E8%AF%8D%E8%AF%BE/Unit1-1_batch.mp4'
			},
			onNextBtnClick () {
				console.log('onNextBtnClick');
				this.src = 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v'
			}
		}
	}
</script>

<style scoped>
	.video {
		height: 300px;
		background-color: #fff;
	}
	.nav {
		color: #fff;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 80rpx;
		background-color: rgba(0,0,0,.5);
	}
</style>